import React, { PureComponent } from "react"
import "./index.less"
import cs from "classnames"
import { appContext } from "context/app-context"
import { read } from "zr-react-toolbox"
import { avatarPath } from "../../../../shared/project-config"
import AvatarLoader from "libs/avatar-loader"


@appContext
class Profile extends PureComponent {
  render() {
    const { context } = this.props
    const userNameClazz = cs({
      "profile-user-info": true,
      hidden: context.menuCollapsed,
    })
    const userInfoClazz = cs({
      "profile-user-info": true,
      "details": true,
      hidden: context.menuCollapsed,
      expended: !context.menuCollapsed
    })

    return (
      <div className={cs("zr-profile", { collapsed: context.menuCollapsed })}>
        <div className={"profile-background"}>
          <AvatarLoader src={`${read(context, 'userInfo.avatar')}`} />
        </div>
        <div className={"profile-background-mask"} />
        <div className="logo-image">
          {/* <AvatarLoader src={`${read(context,'userInfo.avatar')}`}/> */}
          <img src={`${avatarPath(read(context, 'userInfo.avatar'))}`} />
        </div>
        <div className={userNameClazz}>
          {read(context, 'userInfo.name')}
        </div>
        <div className={userInfoClazz}>
          <span className={cs("user-role", { hidden: context.menuCollapsed })}>
            {(read(context, 'userInfo.roles') || []).filter(i => i.code !== 'BASE_USER').map(i => i.name).join(' ')}
          </span>
        </div>
      </div>
    )
  }
}

export default Profile
